<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
  <style>
    .s-btn + .s-btn{
      margin-top: 12px;
    }
  </style>
  <style>
    :root {
      --main-color: #303133;
      --content-color: #606266;
      --tips-color: #909193;
      --light-color: #c0c4cc;
      --border-color: #dadbde;
      --bg-color: #f3f4f6;
      --disabled-color: #c8c9cc;

      --primary: #3c9cff;
      --primary-dark: #398ade;
      --primary-disabled: #9acafc;
      --primary-light: #ecf5ff;

      --warning: #f9ae3d;
      --warning-dark: #f1a532;
      --warning-disabled: #f9d39b;
      --warning-light: #fdf6ec;

      --success: #5ac725;
      --success-dark: #53c21d;
      --success-disabled: #a9e08f;
      --success-light: #f5fff0;

      --error: #f56c6c;
      --error-dark: #e45656;
      --error-disabled: #f7b2b2;
      --error-light: #fef0f0;

      --info: #909399;
      --info-dark: #767a82;
      --info-disabled: #c4c6c9;
      --info-light: #f4f4f5;

      --font-xsmall: 1rem;
      --font-small: 1.2rem;
      --font-medium: 1.4rem;
      --font-large: 1.6rem;
      --font-xlarge: 1.8rem;
      --font-xxlarge: 2rem;

      --padding-xsmall: .5rem;
      --padding-small: .8rem;
      --padding-medium: 1.2rem;
      --padding-large: 1.6rem;
      --padding-xlarge: 2rem;
      --padding-xxlarge: 3rem;

      --radiu-xsmall: .3rem;
      --radiu-small: .4rem;
      --radiu-medium: .6rem;
      --radiu-large: .8rem;
      --radiu-xlarge: 1.2rem;

      --modal-opacity: .15;
      --modal-radiu: .4rem;
      --loading-bg: rgba(0, 0, 0, .8);

      --alert-padding: 1.2rem;
      --alert-title-bg: #c0c4cc;
      --alert-title-color: #303133;
      --alert-title-ft_size: 1.4rem;
      --alert-content-ft_size: 1.6rem;
      --alert-content-color: #606266;
      --alert-content-padding: 1.6rem 1.2rem;
      --alert-btn-color: #303133;
      --alert-btn-ft_size: 1.6rem;
      --alert-btn-padding: 1.4rem 1rem;

    }
  </style>
  <link rel="stylesheet" href="./dist/style.css">
</head>

<body class="p_large font_large">
  <section>
    <p class="font_large">一个简单的scss样式库</p>
  </section>

  <hr>

  <section class="p-t_xlarge">

    <h2 class="l-h_15">按钮</h2>
    <div>
      <p>
        <button name="button" class="s-btn" title="默认按钮">默认</button>
        <button name="button" class="s-btn primary r_xsmall no-b" title="primary按钮">Primary</button>
        <button name="button" class="s-btn success r_large">Success</button>
        <button name="button" class="s-btn warning r_xsmall">Warning</button>
        <button name="button" class="s-btn error r_xsmall circle">Error</button>
      </p>

      <p>
        <button name="button" class="s-btn w_100 r_xsmall">长按钮</button>
        <button name="button" class="s-btn w_100 r_xsmall font_medium circle">Medium长按钮</button>
        <button name="button" class="s-btn w_100 r_small font_large primary circle plus-height">Large长按钮</button>
      </p>
    </div>

    <h2 class="l-h_15">表单</h2>
    <div class="">
      <div class="s-grid-x align-middle b-b p-t_medium p-b_medium">
        <div class="s-cell-2">
          <label class="l-h_1" for="">文本</label>
        </div>
        <div class="s-cell-10 cell-access">
          <div class="access-block">
            <input class="s-input" type="text" placeholder="输入姓名" name="" id="">
          </div>
        </div>
      </div>

      <div class="grid-x align-top b-b p-t_medium p-b_medium">
        <div class="cell">
          <label for="">文本域</label>
        </div>
        <div class="cell">
          <div>
            <textarea class="s-textarea" name="" id="" rows="3" placeholder="输入详细地址"></textarea>
          </div>
        </div>
      </div>
    </div>

    <br />

    <h2>图标</h2>

    <p class="font_xxlarge">
      <i class="s-icon-arrow s-icon-arrow_right"></i>&nbsp;
      <i class="s-icon-arrow s-icon-arrow_right primary thin"></i>&nbsp;
      <i class="s-icon-arrow s-icon-arrow_left success"></i>&nbsp;
      <i class="s-icon-arrow s-icon-arrow_up error"></i>&nbsp;
      <i class="s-icon-arrow s-icon-arrow_down warning"></i>&nbsp;

      <br />

      <span class="s-icon-checkbox"><i></i></span>
      <span class="s-icon-checkbox disabled"><i></i></span>
      <span class="s-icon-checkbox r_xsmall checked"><i></i></span>
      <span class="s-icon-checkbox r_xsmall dark checked disabled"><i></i></span>

      <span class="s-icon-checkbox s-icon-checkbox_circle"><i></i></span>
      <span class="s-icon-checkbox s-icon-checkbox_circle disabled"><i></i></span>
      <span class="s-icon-checkbox s-icon-checkbox_circle dark checked"><i></i></span>
      <span class="s-icon-checkbox s-icon-checkbox_circle checked disabled"><i></i></span>

      <br />

      <span class="s-icon-radio"><i></i></span>
      <span class="s-icon-radio disabled"><i></i></span>
      <span class="s-icon-radio checked"><i></i></span>
      <span class="s-icon-radio dark checked"><i></i></span>
      <span class="s-icon-radio checked disabled"><i></i></span>

      <br />

      <i class="s-icon-char" data-character="!"></i>
      <i class="s-icon-char fill" data-character="?"></i>

      <i class="s-icon-char success r_small" data-character="@"></i>
      <i class="s-icon-char warning fill r_small" data-character="+"></i>

      <i class="s-icon-char primary s-icon-char_circle" data-character="i"></i>
      <i class="s-icon-char fill s-icon-char_circle " data-character="×"></i>
      <i class="s-icon-char error fill s-icon-char_circle" data-character="×"></i>
      <i class="s-icon-char error fill s-icon-char_circle bold" data-character="×"></i>

      <br />

      <i class="s-icon-swith"></i>
      <i class="s-icon-swith active"></i>

      <i class="s-icon-swith primary"></i>
      <i class="s-icon-swith primary active"></i>

      <i class="s-icon-swith success"></i>
      <i class="s-icon-swith success active"></i>

      <i class="s-icon-swith error"></i>
      <i class="s-icon-swith error active"></i>

      <i class="s-icon-swith warning"></i>
      <i class="s-icon-swith warning active"></i>

    </p>

    <h2>模态控件</h2>
    <p>
      <button name="button" class="s-btn primary r_xsmall" onclick="loading()">loading</button>
      <button name="button" class="s-btn success r_xsmall" onclick="confirm()">confirm</button>
      <button name="button" class="s-btn warning r_xsmall" onclick="alert()">alert</button>
      <button name="button" class="s-btn error r_xsmall" onclick="toast()">toast</button>
    </p>

  </section>

  <script src="./dist/simple-ui.umd.js"></script>
  <script>
    console.info($S);

    function loading(){
      $S.loading('稍等...')

      setTimeout(function() {
        $S.loading(false)
      }, 3000);
    }
    
    function confirm(){
      $S.confirm({
        title: '',
        msg: '你是否已准备好？',
        confirmText:'Yes',
        cancelText: 'No',
        confirmPos: 'left',
        theme: 'warning'
      }).then((res) => {
        console.info(`你是否已准备好？`, res)
      })
    }

    function alert(){
      $S.alert({ msg: '很抱歉，你提交的资料审核不通过', btnText:'我知道了', btnType: 'confirm' }).then((res) => {
        console.info(res)
      })
    }

    function toast(){
      $S.toast('请输入正确手机号')
    }
    

  </script>
</body>

</html>